<template>
  <div>
    <div class="box" :style="'padding-left: 10px'">
      <div class="blaek" v-if="loding"></div>
      <div class="top_box">
        <div class="top_in">
          <div class="insj">
            <el-checkbox
              v-model="checked1"
              @change="inp1()"
              size="small"
              style="margin-right: 10px"
              >时间范围</el-checkbox
            ><t-date-range-picker
              :disabled="flay"
              v-model="riqi"
              style="width: 250px"
            />
          </div>
          <div class="ingj">
            <el-checkbox v-model="checked2" @change="inp1()" size="small"
              >高级条件</el-checkbox
            >
          </div>
          <div class="ingj">
            <el-select
              v-model="value1"
              @change="inputcli()"
              placeholder="按天分析"
              :disabled="!flay"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="value2"
              :disabled="!flay"
              @change="inputc"
              placeholder="按天分析"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="ingj" style="margin-left: 0; font-size: 12px">
            组织架构
            <el-select v-model="value3" placeholder="按天分析">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="btn">
            <el-button @click="cz()">重置</el-button>
            <el-button type="primary" @click="cx()">查询</el-button>
          </div>
        </div>
      </div>
      <div class="zhuyao">
        <div class="til">关键指标</div>
        <div class="tilbox">
          <div class="tiitem">
            {{ zdzx.zl }}<ChevronDownIcon /><br />
            <span class="niuw"> 重点咨询总量<br />（次/小时/人数）</span>
            <div class="hov1" style="width: 340px">
              <div class="item_c">
                <div class="ad">{{ zdzx.pt }}</div>
                <div class="eas">普通案例</div>
              </div>
              <div class="item_c">
                <div class="ad">{{ zdzx.wj }}</div>
                <div class="eas">危机个案</div>
              </div>
              <div class="item_c">
                <div class="ad">{{ zdzx.fx }}</div>
                <div class="eas">风险个案</div>
              </div>
              <div class="item_c" style="margin-right: 0">
                <div class="ad">{{ zdzx.zd }}</div>
                <div class="eas">重点个案</div>
              </div>
              <div class="item_c">
                <div class="ad">{{ zdzx.hy }}</div>
                <div class="eas">危机管理会议</div>
              </div>
              <div class="item_c">
                <div class="ad">{{ zdzx.zc }}</div>
                <div class="eas">危机驻场</div>
              </div>
              <div class="item_c" style="margin-right: 0">
                <div class="ad">{{ zdzx.md }}</div>
                <div class="eas">
                  精神疾患 <br />
                  个案MD
                </div>
              </div>
            </div>
          </div>
          <div class="tiitem">
            {{ gnzx.gy }}<ChevronDownIcon /><br />
            <span class="niuw">危机咨询个案总量<br />（次/小时/人数）</span>
            <div class="hov1" style="width: 250px">
              <div class="item_c">
                <div class="ad">{{ gnzx.gy }}</div>
                <div class="eas">
                  危机干预<br />
                  （人次）
                </div>
              </div>
              <div class="item_c">
                <div class="ad">{{ 0 }}</div>
                <div class="eas">
                  危机驻场<br />
                  （人次）
                </div>
              </div>
              <div class="item_c" style="margin-right: 0">
                <div class="ad">{{ 0 }}</div>
                <div class="eas">
                  管理咨询<br />
                  （人次）
                </div>
              </div>
            </div>
          </div>
          <div class="tiitem">
            {{ glz }}<br />
            <span class="niuw"> 管理者咨询<br />（次/小时/人数）</span>
            <!-- <span class="wen">
              ？
              <div class="hov">
                只计算了观看过课程的人数，此数据因统计时间问题可能存在一定的偏差。
              </div>
            </span> -->
          </div>
          <!-- <div class="tiitem">
            1111 <br />
            <span class="niuw">主管转介危机个案<br />（次/时间）</span>
          </div> -->
        </div>
      </div>
      <div class="boxgg">
        <div class="echats-box">
          <div class="echats-title">危机咨询量</div>
          <div class="echats-item">
            <div id="chart_29"></div>
          </div>
          <div class="baitiao"></div>
        </div>
        <div class="echats-box">
          <div class="echats-title">地区危机事件出现情况</div>
          <div class="echats-item">
            <div id="chart_30"></div>
          </div>
          <div class="baitiao"></div>
        </div>
      </div>

      <div class="boxgg">
        <div class="echats-box">
          <div class="echats-title">风险程度占比</div>
          <div class="echats-item" style="height: 480px">
            <div id="chart_31"></div>
          </div>
          <div class="baitiao"></div>
        </div>
        <div class="echats-box">
          <div class="echats-title">危机人员基本信息占比</div>
          <div class="echats-item" style="height: 480px">
            <div class="fwel">
              <div id="chart_32" style="width: 49%; height: 100%"></div>
              <div id="chart_33" style="width: 49%; height: 100%"></div>
            </div>
            <div class="fwel">
              <div id="chart_34" style="width: 49%; height: 100%"></div>
              <div id="chart_35" style="width: 49%; height: 100%"></div>
            </div>
          </div>
          <div class="baitiao"></div>
        </div>
      </div>
      <div class="zhuyao" style="height: 480px">
        <div class="til each_title">
          各组织危机占比
          <!-- <el-select v-model="value4" placeholder="按天分析">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </div>
        <div class="eca">
          <div class="itewaw">
            <div id="chart_36"></div>
            <div id="chart_37"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  onActivated,
  onDeactivated,
} from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { ChevronDownIcon } from "tdesign-icons-vue-next";
import {
  keyOfConsultTotal,
  crisistTotal,
  crisistManager,
  areaByGender,
  crisisOrg,
  getByGenrder,
  getByAge,
  getByArea,
  getByRe,
} from "../../api/crisisL";
import {
  chart_29,
  chart_30,
  chart_31,
  chart_32,
  chart_33,
  chart_34,
  chart_35,
  chart_36,
  chart_37,
} from "../../echats/Current";
import * as echarts from "echarts";
const activeIndex = ref("/centre/platformO");
const value1 = ref("1");
const value2 = ref("30");
const value3 = ref(0);
const value4 = ref("近7天");
const breakoff = ref(false);
let checked2 = ref(true);
let checked1 = ref(false);
let Echart_1 = ref(null);
let Echart_2 = ref(null);
let Echart_3 = ref(null);
let Echart_4 = ref(null);
let Echart_5 = ref(null);
let Echart_6 = ref(null);
let Echart_7 = ref(null);
let Echart_8 = ref(null);
let Echart_9 = ref(null);
let loding = ref(true);
let zlzl = ref(0);
let riqi = ref([]);
let fwrs = ref(0);
let tsy = ref("");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
const options = [
  {
    value: "1",
    label: "按天分析",
  },
  {
    value: "2",
    label: "按月度",
  },
  {
    value: "3",
    label: "按季度",
  },
  {
    value: "4",
    label: "按年度",
  },
];
let options1 = ref([
  {
    value: "7",
    label: "近7天",
  },
  {
    value: "30",
    label: "近30天",
  },
  {
    value: "90",
    label: "近90天",
  },
]);
let flay = ref(true);
const options2 = [
  {
    value: 0,
    label: "集团公司",
  },
  {
    value: 1,
    label: "子/分公司",
  },
  {
    value: 2,
    label: "部门",
  },
];
const options3 = [
  {
    value: "近7天",
    label: "近7天",
  },
  {
    value: "近30天",
    label: "近30天",
  },
];
const inputcli = () => {
  if (value1.value === "1") {
    options1.value = [
      {
        value: "7",
        label: "近7天",
      },
      {
        value: "30",
        label: "近30天",
      },
      {
        value: "90",
        label: "近90天",
      },
    ];
    value2.value = "30";
  } else if (value1.value === "2") {
    options1.value = [
      {
        value: "6",
        label: "近6个月",
      },
      {
        value: "12",
        label: "近12个月",
      },
    ];
    value2.value = "6";
  } else if (value1.value === "3") {
    options1.value = [
      {
        value: "1",
        label: "近一个季度",
      },
      {
        value: "2",
        label: "近两个季度",
      },
      {
        value: "3",
        label: "近三个季度",
      },
      {
        value: "4",
        label: "近四个季度",
      },
    ];
    value2.value = "1";
  } else {
    options1.value = [
      {
        value: "1",
        label: "近一年",
      },
      {
        value: "2",
        label: "近两年",
      },
    ];
    value2.value = "1";
  }
};
const inp1 = () => {
  flay.value = !flay.value;
  if (flay.value) {
    checked1.value = false;
    checked2.value = true;
  } else {
    checked1.value = true;
    checked2.value = false;
  }
};
const inputc = (ev) => {
  value2.value = ev;
};
const riqijs = () => {
  // 获取今天的时间
  const today = new Date();

  // 获取未来第30天的时间
  const futureDate = new Date();
  futureDate.setDate(today.getDate() - 30);

  // 将时间格式化为字符串
  const todayStr = today.toISOString().slice(0, 10);
  const futureDateStr = futureDate.toISOString().slice(0, 10);
  // 输出结果
  riqi.value = [futureDateStr, todayStr];
};
let cp = ref(0);
let sc = ref(0);
let acsi = ref([]);
let dataarrq = ref([]);
let zdzx = reactive({
  wj: 0,
  fx: 0,
  zd: 0,
  md: 0,
  zl: 0,
  hy: 0,
  zc: 0,
  pt: 0,
});
let gnzx = reactive({
  gy: 0,
});
let glz = ref(0);
const api = async () => {
  const res1 = await getplat({
    category: "12",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  //图表
  const res0 = await getplatlist({
    category: "12",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  Echart_1 = echarts.init(document.getElementById("chart_zhe"));
  const eacdata = {
    time: [],
    zl: [],
    fww: [],
    cprs: [],
    tjda: [],
    scrs: [],
  };
  res0.data[0].pvnum.forEach((item) => {
    eacdata.time.push(item.createtime);
    eacdata.zl.push(item.pvnum);
  });
  res0.data[0].uvnum.forEach((item) => {
    eacdata.fww.push(item.uvnum);
  });
  res0.data[0].snum.forEach((item) => {
    eacdata.cprs.push(item.snum);
  });
  res0.data[0].snumName.forEach((item) => {
    if (item.name === null) return;
    eacdata.tjda.push(item);
  });
  dataarrq.value = eacdata.tjda;
  acsi.value = dataarrq.value.slice(0, 6);
  let optionCS = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["浏览量", "访问人数", "观看人数", "收藏人数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "浏览量",
        type: "line",

        smooth: true,
        data: [],
      },
      {
        name: "访问人数",
        type: "line",

        smooth: true,
        data: [],
      },
      {
        name: "观看人数",
        type: "line",
        smooth: true,
        data: [],
      },
    ],
  };
  optionCS.xAxis.data = eacdata.time;
  optionCS.series[0].data = eacdata.zl;
  optionCS.series[1].data = eacdata.fww;
  optionCS.series[2].data = eacdata.cprs;
  Echart_1.setOption(optionCS);
  zlzl.value = res1.data[0].pvnum;
  fwrs.value = res1.data[0].uvnum;
  cp.value = res1.data[0].snum;
  sc.value = res1.data[0].scount;
};
//重置
const cz = async () => {
  value1.value = "1";
  value2.value = "30";
  flay.value = true;
  eac("重置");
};
//查询
const cx = async () => {
  if (flay.value) {
    eac("查询");
  } else {
    loding.value = true;
    breakoff.value = false;
    clearTimeout(tsy.value);
    MessagePlugin.loading("正在查询中....", 0);
    tsy.value = setTimeout(() => {
      if (loding.value) {
        loding.value = false;
        MessagePlugin.closeAll();
        MessagePlugin.error("加载超时,请刷新页面重试！");
      }
    }, 20000);
    //上
    const res1 = await keyOfConsultTotal({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    const res2 = await crisistTotal({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    const res3 = await crisistManager({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    zdzx.md = 0;
    zdzx.fx = 0;
    zdzx.wj = 0;
    zdzx.hy = 0;
    zdzx.zc = 0;
    zdzx.zd = 0;
    res1.data.forEach((item) => {
      zdzx.zl += Number(item.times);
    });
     if (res1.data[0] !== undefined) {
    if (res1.data[0].times === null) {
      zdzx.md = 0;
    } else {
      zdzx.md = res1.data[0].times;
    }
  }
  if (res1.data[1] !== undefined) {
    if (res1.data[1].times === null) {
      zdzx.fx = 0;
    } else {
      zdzx.fx = res1.data[1].times;
    }
  }
  if (res1.data[2] !== undefined) {
    if (res1.data[2].times === null) {
      zdzx.pt = 0;
    } else {
      zdzx.pt = res1.data[2].times;
    }
  }
  if (res1.data[3] !== undefined) {
    if (res1.data[3].times === null) {
      zdzx.wj = 0;
    } else {
      zdzx.wj = res1.data[3].times;
    }
  }
  if (res1.data[4] !== undefined) {
    if (res1.data[4].times === null) {
      zdzx.hy = 0;
    } else {
      zdzx.hy = res1.data[4].times;
    }
  }
  if (res1.data[5] !== undefined) {
    if (res1.data[5].times === null) {
      zdzx.zc = 0;
    } else {
      zdzx.zc = res1.data[5].times;
    }
  }
  console.log();
  if (res1.data[6] !== undefined) {
    if (res1.data[6].times === null) {
      zdzx.zd = 0;
    } else {
      zdzx.zd = res1.data[6].times;
    }
  }
    if (res2.data[0].times === null) {
      gnzx.gy = 0;
    } else {
      gnzx.gy = res2.data[0].times;
    }
    glz.value = res3.data[0].times;
    //下
    //1
    let ec11 = [];
    let ec12 = [];
    ec11.push("危机干预");
    ec11.push("危机驻场");
    ec11.push("管理咨询");
    if (res2.data[0].times === null) {
      ec12.push(0);
    } else {
      ec12.push(res2.data[0].times);
    }
    ec12.push(0);
   if (res3.data[0].times === null) {
      ec12.push(0);
    } else {
      ec12.push(res3.data[0].times);
    }
    const casdata = chart_29(echarts);
    casdata.xAxis.data = ec11;
    casdata.series[0].data = ec12;
    Echart_1 = echarts.init(document.getElementById("chart_29"));
    Echart_1.setOption(casdata);
    //2
    const res4 = await areaByGender({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec21 = [];
    let ec22 = [];
    let ec23 = [];
    res4.data.forEach((item) => {
      ec21.push(item.Area);
      ec22.push(item.man);
      ec23.push(item.woman);
    });
    let option2 = chart_30();
    option2.yAxis.data = ec21;
    option2.series[0].data = ec22;
    option2.series[1].data = ec23;
    Echart_2 = echarts.init(document.getElementById("chart_30"));
    Echart_2.setOption(option2);
    //3
    let ec31 = [];
    let ec32 = [];
    res1.data.forEach((item) => {
      ec31.push(item.name);
      ec32.push({ name: item.name, value: Number(item.times) });
    });
    let option3 = chart_31();
    option3.legend.data = ec31;
    setTimeout
    option3.series[0].data = ec32;
    Echart_3 = echarts.init(document.getElementById("chart_31"));
    Echart_3.setOption(option3);
    //4
    let ec41 = [];
    let ec42 = [];
    const res5 = await getByGenrder({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    ec41.push("男性");
    ec41.push("女性");
    res5.data.forEach((item) => {
      if (item.gender === "1") {
        ec42.push({ name: "男性", value: Number(item.number) });
      } else {
        ec42.push({ name: "女性", value: Number(item.number) });
      }
      console.log(res5.data);
      if (res5.data.length === 1) {
        if (res5.data[0].gender === "1") {
          ec42.push({ name: "女性", value: 0 });
        } else {
          ec42.push({ name: "男性", value: 0 });
        }
      }
    });
    let option4 = chart_32();
    option4.legend.data = ec41;
    option4.series[0].data = ec42;
    Echart_4 = echarts.init(document.getElementById("chart_32"));
    Echart_4.setOption(option4);
    //5
    let ec51 = [];
    let ec52 = [];
    const res6 = await getByAge({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    res6.data.forEach((item) => {
      ec51.push(item.age);
      ec52.push({ name: item.age, value: Number(item.number) });
    });
    let option5 = chart_33();
    option5.legend.data = ec51;
    option5.series[0].data = ec52;
    Echart_5 = echarts.init(document.getElementById("chart_33"));
    Echart_5.setOption(option5);
    //6
    let ec61 = [];
    let ec62 = [];
    const res7 = await getByArea({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    res7.data.forEach((item) => {
      ec61.push(item.area);
      ec62.push({ name: item.area, value: Number(item.number) });
    });
    let option6 = chart_34();
    option6.legend.data = ec61;
    option6.series[0].data = ec62;
    Echart_6 = echarts.init(document.getElementById("chart_34"));
    Echart_6.setOption(option6);
    //7
    let ec71 = [];
    let ec72 = [];
    const res8 = await getByRe({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    res8.data.forEach((item) => {
      ec71.push(item.CallerEmployeeRe);
      ec72.push({ name: item.CallerEmployeeRe, value: Number(item.number) });
    });
    let option7 = chart_35();
    option7.legend.data = ec71;
    option7.series[0].data = ec72;
    Echart_7 = echarts.init(document.getElementById("chart_35"));
    Echart_7.setOption(option7);
    //8
    let ec81 = [];
    let ec82 = [];
    const res9 = await crisisOrg({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    res9.data.forEach((item) => {
      ec81.push(item.name);
      ec82.push({ name: item.name, value: Number(item.number) });
    });
    let option8 = chart_36();
    option8.legend.data = ec81;
    option8.series[0].data = ec82;
    Echart_8 = echarts.init(document.getElementById("chart_36"));
    Echart_8.setOption(option8);
    //9
    Echart_9 = echarts.init(document.getElementById("chart_37"));
    Echart_9.setOption(chart_37());
    loding.value = false;
    breakoff.value = true;
    MessagePlugin.closeAll();
    MessagePlugin.success("加载成功！");
  }
};
const eac = async (jzzd) => {
  loding.value = true;
  MessagePlugin.loading("正在" + jzzd + "中....", 0);
  breakoff.value = false;
  tsy.value = setTimeout(() => {
    if (loding.value) {
      loding.value = false;
      MessagePlugin.closeAll();
      MessagePlugin.error("加载超时,请刷新页面重试！");
    }
  }, 20000);
  //上
  const res1 = await keyOfConsultTotal({
    param1: value1.value,
    param2: value2.value,
  });
  const res2 = await crisistTotal({
    param1: value1.value,
    param2: value2.value,
  });
  const res3 = await crisistManager({
    param1: value1.value,
    param2: value2.value,
  });
  zdzx.zl = 0;
  res1.data.forEach((item) => {
    zdzx.zl += Number(item.times);
  });
  zdzx.md = 0;
  zdzx.fx = 0;
  zdzx.wj = 0;
  zdzx.hy = 0;
  zdzx.zc = 0;
  zdzx.zd = 0;
  zdzx.pt = 0;
  if (res1.data[0] !== undefined) {
    if (res1.data[0].times === null) {
      zdzx.md = 0;
    } else {
      zdzx.md = res1.data[0].times;
    }
  }
  if (res1.data[1] !== undefined) {
    if (res1.data[1].times === null) {
      zdzx.fx = 0;
    } else {
      zdzx.fx = res1.data[1].times;
    }
  }
  if (res1.data[2] !== undefined) {
    if (res1.data[2].times === null) {
      zdzx.pt = 0;
    } else {
      zdzx.pt = res1.data[2].times;
    }
  }
  if (res1.data[3] !== undefined) {
    if (res1.data[3].times === null) {
      zdzx.wj = 0;
    } else {
      zdzx.wj = res1.data[3].times;
    }
  }
  if (res1.data[4] !== undefined) {
    if (res1.data[4].times === null) {
      zdzx.hy = 0;
    } else {
      zdzx.hy = res1.data[4].times;
    }
  }
  if (res1.data[5] !== undefined) {
    if (res1.data[5].times === null) {
      zdzx.zc = 0;
    } else {
      zdzx.zc = res1.data[5].times;
    }
  }
  if (res1.data[6] !== undefined) {
    if (res1.data[6].times === null) {
      zdzx.zd = 0;
    } else {
      zdzx.zd = res1.data[6].times;
    }
  }
 
  if (res2.data[0].times === null) {
    gnzx.gy = 0;
  } else {
    gnzx.gy = res2.data[0].times;
  }
  glz.value = res3.data[0].times;
  //下
  //1
  let ec11 = [];
  let ec12 = [];
  ec11.push("危机干预");
  ec11.push("危机驻场");
  ec11.push("管理咨询");
  if (res2.data[0].times === null) {
    ec12.push(0);
  } else {
    ec12.push(res2.data[0].times);
  }
  ec12.push(0);
     if (res3.data[0].times === null) {
      ec12.push(0);
    } else {
      ec12.push(res3.data[0].times);
    }
  const casdata = chart_29(echarts);
  casdata.xAxis.data = ec11;
  casdata.series[0].data = ec12;
  Echart_1 = echarts.init(document.getElementById("chart_29"));
  Echart_1.setOption(casdata);
  //2
  const res4 = await areaByGender({
    param1: value1.value,
    param2: value2.value,
  });
  let ec21 = [];
  let ec22 = [];
  let ec23 = [];
  res4.data.forEach((item) => {
    ec21.push(item.Area);
    ec22.push(item.man);
    ec23.push(item.woman);
  });
  let option2 = chart_30();
  option2.yAxis.data = ec21;
  option2.series[0].data = ec22;
  option2.series[1].data = ec23;
  Echart_2 = echarts.init(document.getElementById("chart_30"));
  Echart_2.setOption(option2);
  //3
  let ec31 = [];
  let ec32 = [];
  res1.data.forEach((item) => {
    ec31.push(item.name);
    ec32.push({ name: item.name, value: Number(item.times) });
  });
  let option3 = chart_31();
  option3.legend.data = ec31;
  option3.series[0].data = ec32;
  Echart_3 = echarts.init(document.getElementById("chart_31"));
  Echart_3.setOption(option3);
  //4
  let ec41 = [];
  let ec42 = [];
  const res5 = await getByGenrder({
    param1: value1.value,
    param2: value2.value,
  });
  ec41.push("男性");
  ec41.push("女性");
  res5.data.forEach((item) => {
    if (item.gender === "1") {
      ec42.push({ name: "男性", value: Number(item.number) });
    } else {
      ec42.push({ name: "女性", value: Number(item.number) });
    }
    console.log(res5.data);
    if (res5.data.length === 1) {
      if (res5.data[0].gender === "1") {
        ec42.push({ name: "女性", value: 0 });
      } else {
        ec42.push({ name: "男性", value: 0 });
      }
    }
  });
  let option4 = chart_32();
  option4.legend.data = ec41;
  option4.series[0].data = ec42;
  Echart_4 = echarts.init(document.getElementById("chart_32"));
  Echart_4.setOption(option4);
  //5
  let ec51 = [];
  let ec52 = [];
  const res6 = await getByAge({
    param1: value1.value,
    param2: value2.value,
  });
  res6.data.forEach((item) => {
    ec51.push(item.age);
    ec52.push({ name: item.age, value: Number(item.number) });
  });
  let option5 = chart_33();
  option5.legend.data = ec51;
  option5.series[0].data = ec52;
  Echart_5 = echarts.init(document.getElementById("chart_33"));
  Echart_5.setOption(option5);
  //6
  let ec61 = [];
  let ec62 = [];
  const res7 = await getByArea({
    param1: value1.value,
    param2: value2.value,
  });
  res7.data.forEach((item) => {
    ec61.push(item.area);
    ec62.push({ name: item.area, value: Number(item.number) });
  });
  let option6 = chart_34();
  option6.legend.data = ec61;
  option6.series[0].data = ec62;
  Echart_6 = echarts.init(document.getElementById("chart_34"));
  Echart_6.setOption(option6);
  //7
  let ec71 = [];
  let ec72 = [];
  const res8 = await getByRe({
    param1: value1.value,
    param2: value2.value,
  });
  res8.data.forEach((item) => {
    ec71.push(item.CallerEmployeeRe);
    ec72.push({ name: item.CallerEmployeeRe, value: Number(item.number) });
  });
  let option7 = chart_35();
  option7.legend.data = ec71;
  option7.series[0].data = ec72;
  Echart_7 = echarts.init(document.getElementById("chart_35"));
  Echart_7.setOption(option7);
  //8
  let ec81 = [];
  let ec82 = [];
  const res9 = await crisisOrg({
    param1: value1.value,
    param2: value2.value,
  });
  res9.data.forEach((item) => {
    ec81.push(item.name);
    ec82.push({ name: item.name, value: Number(item.number) });
  });
  let option8 = chart_36();
  option8.legend.data = ec81;
  option8.series[0].data = ec82;
  Echart_8 = echarts.init(document.getElementById("chart_36"));
  Echart_8.setOption(option8);
  //9
  Echart_9 = echarts.init(document.getElementById("chart_37"));
  Echart_9.setOption(chart_37());
  loding.value = false;
  MessagePlugin.closeAll();
  MessagePlugin.success("" + jzzd + "成功！");
  breakoff.value = true;
  setTimeout(() => {
    Echart_1.resize();
    Echart_2.resize();
    Echart_3.resize();
    Echart_4.resize();
    Echart_5.resize();
    Echart_6.resize();
    Echart_7.resize();
    Echart_8.resize();
    Echart_9.resize();
  }, 0);
};
onMounted(() => {
  riqijs();
  window.onresize = function () {
    Echart_1.resize();
    Echart_2.resize();
    Echart_3.resize();
    Echart_4.resize();
    Echart_5.resize();
    Echart_6.resize();
    Echart_7.resize();
    Echart_8.resize();
    Echart_9.resize();
  };
});
onActivated(() => {
  //缓存页面再启动函数
  if (breakoff.value !== true) {
    eac("加载");
  }
  window.onresize = function () {
    Echart_1.resize();
    Echart_2.resize();
    Echart_3.resize();
    Echart_4.resize();
    Echart_5.resize();
    Echart_6.resize();
    Echart_7.resize();
    Echart_8.resize();
    Echart_9.resize();
  };
});
onDeactivated(() => {
  //缓存页面暂离函数
  clearTimeout(tsy.value);
  MessagePlugin.closeAll();
});
onUnmounted(() => {
  clearTimeout(tsy.value);
  MessagePlugin.closeAll();
  if (Echart_1.value !== null) {
    Echart_1.dispose();
  }
  if (Echart_2.value !== null) {
    Echart_2.dispose();
  }
  if (Echart_3.value !== null) {
    Echart_3.dispose();
  }
  if (Echart_4.value !== null) {
    Echart_4.dispose();
  }
  if (Echart_5.value !== null) {
    Echart_5.dispose();
  }
  if (Echart_6.value !== null) {
    Echart_6.dispose();
  }
  if (Echart_7.value !== null) {
    Echart_7.dispose();
  }
  if (Echart_8.value !== null) {
    Echart_8.dispose();
  }
  if (Echart_9.value !== null) {
    Echart_9.dispose();
  }
  MessagePlugin.closeAll();
});
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  .blaek {
    position: absolute;
    right: 0;
    top: -20px;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.5);
  }
  width: calc(100% - 30px);
  padding-left: 20px;

  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
  }
  .el-menu--horizontal {
    border-bottom: none;
  }
  .top_in {
    width: 100%;
    margin-left: 10px;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    .ingj {
      margin-left: 10px;
      .el-select {
        width: 100px !important;
        margin-right: 10px;
      }
    }
    .btn {
      width: 150px;
      height: 30px;
      justify-content: space-between;
      .el-button {
        width: 55px;
      }
    }
  }
  .zhuyao {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    .el-select {
      width: 100px !important;
      margin-right: 20px;
    }
    .til {
      font-size: 14px;
      margin-left: 20px;
      text-indent: 5px;
    }
    .tilbox {
      width: 60%;
      height: 80px;
      // margin-left: 60px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      .tiitem {
        position: relative;
        cursor: pointer;
        width: 30%;
        height: 100%;
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color: #409eff;
        .hov1 {
          position: absolute;
          left: 27px;
          top: 60px;
          border-radius: 5px;
          padding: 20px 20px;
          font-size: 18px;
          color: #000;
          display: none;

          z-index: 2;
          white-space: nowrap;
          background: #f3f3f3;
          border: solid 1px #000;
          .item_c {
            width: 70px;
            height: 70px;
            margin-right: 20px;
            text-align: center;
            float: left;
            .ad {
              font-weight: bold;
              color: #409eff;
            }
            .eas {
              font-size: 12px;
              font-weight: bold;
              color: #000;
            }
          }
        }
        .niuw {
          font-size: 14px;
          color: #000;
          font-weight: 500;
        }
        .wen {
          position: relative;
          width: 10px;
          height: 10px;
          left: 5px;
          line-height: 10px;
          text-indent: 5px;
          background: #409eff;
          text-align: center;
          border-radius: 50%;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          .hov {
            position: absolute;
            left: -34px;
            top: 24px;
            border-radius: 5px;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            color: #000;
            display: none;
            white-space: nowrap;
            background: rgb(255, 233, 204);
          }
        }
        .wen:hover {
          .hov {
            display: block;
          }
        }
      }
      .tiitem:hover {
        .hov1 {
          display: block;
        }
      }
    }
  }
  .each_title {
    // border-left: 4px solid;
    // border-image: linear-gradient(
    //     to bottom,
    //     rgb(124, 100, 199) 20%,
    //     rgb(59, 182, 254) 70%
    //   )
    //   1;
  }
  .eca {
    width: 95%;
    height: 480px;
    margin: auto;
    margin-top: 20px;
    div {
      width: 100%;
      height: 100%;
    }
  }
  .boxtj {
    margin: auto;
    margin-top: 15px;
    margin-left: 20px;
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
    .zijibox {
      position: relative;
      width: 120px;
      height: 100px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 33px;
      color: #409eff;
      border: solid 2px #000;
      .dhwid {
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .xx {
        position: absolute;
        right: 10px;
        top: 9px;
      }
    }
    .zijibox1 {
      margin-top: 45px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.boxgg {
  width: 100%;
  display: flex;
  margin-top: -10px;
  justify-content: space-between;
}
.baitiao {
  position: absolute;
  width: 100%;
  height: 11px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  left: 0;
  bottom: -7px;
}
.echats-box {
  width: 49.5%;
  height: 100%;
  position: relative;
  .echats-title {
    padding: 0 5px;
    position: relative;
    top: 25px;
    line-height: 3;
    left: auto;
    z-index: 1;
    text-indent: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #fff;
  }
}
.echats-item {
  flex: none;
  width: 100%;
  height: 430px;
  border-radius: 10px;
  background: rgb(247, 247, 247);
  div {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
.eca_1 {
  width: 95%;
  height: 500px;
  margin: auto;
  margin-top: 20px;
  .casboxq {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-around;
    div {
      width: 30%;
      height: 100%;
      //   background: red;
    }
  }
}
.fwel {
  display: flex;
  justify-content: space-around;
  height: 50% !important;
  width: 100%;
}
.itewaw {
  display: flex;
  width: 100%;
  justify-content: space-around;
  div {
    width: 49% !important;
    height: 100%;
  }
}
</style>
